import React, { useState, useEffect } from "react";
import { Button, Col, DatePicker, Table, Dropdown, Input, Row, Select, message, Radio, Space, Modal } from "antd";
import { SearchOutlined, DownOutlined, LoadingOutlined, SyncOutlined } from "@ant-design/icons";
import storageAJAX from "@services/storage";
import _ from "lodash";
import moment from "moment";
import styled from "styled-components";
import { useNavigate } from "react-router-dom";

const { Option } = Select;
const { Search } = Input;
let ignore = false;

const SearchBar = ({ className, background, height }) => {
	const [keyword, setKeyword] = useState();
	const [searchType, setSearchType] = useState("Chain");
	const [placeholder, setPlaceholder] = useState("Search by Block / Hash / Account");

	const navigate = useNavigate();

	useEffect(() => {
		ignore = false;
		// getStore();
		return () => {
			ignore = true;
		};
	}, []);

	const onSearch = e => {
		let url = "/" + searchType + "/" + keyword;
		navigate(url);
	};
	const onInput = e => {
		setKeyword(e.target.value);
	};
	const onClear = () => {
		setKeyword("");
	};
	const items = [
		{
			key: "Chain",
			label: "Chain"
		},
		{
			key: "Storage",
			label: "Storage"
		}
	];
	const onClick = ({ key }) => {
		// message.info(`Click on item ${key}`);
		setSearchType(key);
		let tmp = "Search by Fid / Account";
		if (key == "Chain") {
			tmp = "Search by Block / Hash / Account";
		}
		setPlaceholder(tmp);
	};

	return (
		<div className={className} style={{ background: background, height: height }}>
			<div className="search">
				<div className="search-box">
					<Dropdown
						menu={{
							items,
							onClick
						}}
						className="ddl">
						<a onClick={e => e.preventDefault()}>
							<Space>
								{searchType}
								<DownOutlined />
							</Space>
						</a>
					</Dropdown>
					<input onInput={onInput} onKeyPress={onInput} onChange={onInput} className="input" type="text" placeholder={placeholder} value={keyword} />
					<span className="btn">
						<label onClick={onClear}>clear</label>
						<span onClick={onSearch}>
							<img src={process.env.PUBLIC_URL + "/img/search.png"} />
						</span>
					</span>
				</div>
			</div>
		</div>
	);
};

export default React.memo(styled(SearchBar)`
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	@media screen and (max-width: 650px) {
		.btn {
			display: none !important;
		}
	}
	.search {
		max-width: 1760px;
		margin: 0 auto;
		width: calc(100% - 40px);
		padding: 0 20px;
		display: block;
		.search-box {
			border-radius: 5px;
			background-color: #fff;
			height: 60px;
			display: flex;
			align-items: center;
			.ddl {
				padding-right: 5%;
				display: block;
				height: 60px;
				line-height: 60px;
				font-size: 14px;
				margin: 0 10px;
				border-right: 1px solid rgba(40, 46, 57, 1);
			}
			.input {
				height: 60px;
				line-height: 60px;
				flex: 1;
				outline: none;
				border: none;
				background-color: transparent;
				padding: 0;
				margin: 0;
			}
			.btn {
				width: 120px;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				label {
					line-height: 60px;
					font-size: 14px;
					text-decoration: underline;
					color: #282e39;
					cursor: pointer;
				}
				span {
					width: 40px;
					height: 40px;
					background-color: rgba(0, 87, 255, 1);
					border-radius: 5px;
					font-size: 14px;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					img {
						width: 25px;
						height: 25px;
					}
				}
				span:hover {
					background-color: #2269f7;
				}
			}
		}
	}
`);
